<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>咨询详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${ctx}/assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="${ctx}/assets/css/index.css?v=2.3">
</head>
<body class="bg-white">
<header data-am-widget="header" class="am-header am-header-default am-header-fixed am-border-bottom">
    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)"> <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        咨询详情
    </h1>

</header>
<section class="am-padding-bottom-sm" id="amz-main" data-tag="css-nav">


    <div data-am-widget="tabs" class="am-tabs am-tabs-d2 bg-white ">
        <ul class="am-tabs-nav am-cf tab-fixeds bg-white">
            <li class="am-active">
                <div class="width-100 border-right margin-top-6 height-30"><a href="[data-tab-panel-0]">详情</a></div>
            </li>
            <li class="">
                <div class="width-100  margin-top-6 height-30"><a href="[data-tab-panel-1]">状态</a></div>
            </li>

        </ul>
        <div class="am-tabs-bd margin-top-42">
            <div data-tab-panel-0 class="am-tab-panel am-active bg-gray tab-fixed">
                <div class="bg-white">
                    <!--咨询师-->
                    <div class="am-g  am-padding-top-sm bg">
                        <div class=" am-u-sm-12 am-list-main  am-padding-left-sm">
                            <div class="div-65">
                                <a class="">
                                    <img class="img-65" src="${counselor.personHead}"/>
                                </a>
                            </div>
                            <div class="am-list-item-hd font-color-13 am-text-center">
                                ${counselor.counseName}
                            </div>
                        </div>
                    </div>
                    <!--咨询介绍-->
                    <div class=" am-padding-bottom-sm">
                        <div class="report_item bg-gray am-margin-left-sm am-margin-right-sm am-margin-top-sm ">
                            <div class="am-g   am-padding-top-sm   am-padding-bottom-sm">
                                <div class=" am-u-sm-12 am-list-main font-color-13 box">
                                    <i class="icon_12"></i>

                                    <div class="width-50px">
                                        <div class="icon_9-1"></div>
                                        <div class="line-1">
                                            <i class="circle-1"></i>
                                        </div>
                                        <div class="line-2">
                                            <i class="circle-1"></i>
                                        </div>
                                        <div class="line-2">
                                            <i class="circle-1"></i>
                                        </div>
                                    </div>
                                    <div class="box-1">
                                        <div class="am-list-item-hd font-color-13 am-padding-top-sm am-text-truncate">
                                            咨询方式： <c:if test="${order.counseType==1}">电话咨询</c:if>
                                            <c:if test="${order.counseType==2}">面对面咨询</c:if>
                                            <c:if test="${order.counseType==3}">视频咨询</c:if>
                                        </div>
                                        <div class="font-14  margin-top-9 ">
                                            预约时间：${order.bookTime}
                                        </div>
                                        <div class="font-14   margin-top-9">
                                            购买时长：<span class="font-color-17">${order.serviceTime}分钟</span>
                                        </div>
                                        <div class="font-14   margin-top-9">
                                            总价：<span class="font-color-17">&yen;${order.orderPrice}</span>
                                        </div>

                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <!--订单信息-->
                    <div class="am-padding-left-lg am-padding-right-sm am-padding-bottom-sm">
                        <div class="box font-color-13 am-margin-bottom-sm am-margin-top-xs">
                            <div class="width-40px">
                                <div class="icon_10"></div>
                            </div>
                            <div class="box-1 padding-top-3px">
                                付款方式：微信支付
                            </div>
                        </div>
                        <div class="box font-color-13 am-margin-bottom-sm">
                            <div class="width-40px">
                                <div class="icon_68"></div>
                            </div>
                            <div class="box-1 padding-top-3px">
                                下单时间：${order.dateAdd}
                            </div>
                        </div>
                        <div class="box font-color-13 am-margin-bottom-sm">
                            <div class="width-40px">
                                <div class="icon_69"></div>
                            </div>
                            <div class="box-1 padding-top-3px">
                                订单编号：${order.orderSn}
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bg-white am-margin-top-sm am-padding-top-sm am-padding-bottom-xs">
                    <!-- 基本信息-->
                    <div class="icon_26 am-text-center font-color-12 ">
                        基本信息
                    </div>
                    <c:if test="${order.sex==null}">
                        暂未填写
                    </c:if>
                    <c:if test="${order.sex!=null}">
                    <div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px"><div class="icon_71"></div></div>
                            <div class="font-color-13 box-1">姓名：${order.customerName}</div>
                        </div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px prelative"><i class="dian3"></i></div>
                            <div class="font-color-13 box-1">电话：${order.telephone}</div>
                        </div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px prelative"><i class="dian3"></i></div>
                            <div class="font-color-13 box-1">性别：<c:if test="${order.sex==1}">男</c:if>
                            <c:if test="${order.sex==2}">女</c:if>
                            </div>
                        </div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px prelative"><i class="dian3"></i></div>
                            <div class="font-color-13 box-1">婚姻：<c:if test="${order.marriage==1}">已婚</c:if>
                            <c:if test="${order.marriage==2}">未婚</c:if>
                            <c:if test="${order.marriage==3}">离异</c:if></div>
                        </div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px prelative"><i class="dian3"></i></div>
                            <div class="font-color-13 box-1">年龄：${order.age}</div>
                        </div>
                        <div class="box am-container am-margin-top-sm">
                            <div class="width-40px prelative"><i class="dian3"></i></div>
                            <div class="font-color-13 box-1">学龄情况：
                             ${order.schoolAgeStr}</div>
                        </div>
                    </div>
					</c:if>


                </div>
            </div>


            <div data-tab-panel-1 class="am-tab-panel ">
                <div class="am-g am-g-fixed order-detail-status am-margin-top-sm am-padding-bottom-sm">
                    
                    <c:if test="${order.dateAdd!=null}">
	                    <div class="am-u-sm-2"><span class="order-detail-left-1 cur"></span></div>
	                    <div class="am-u-sm-10 order-detail-right cur">
	                        <span class="am-margin-left-xs ">订单创建</span> 
	                        <span class="am-text-sm am-margin-left-sm am-fr ">${order.dateAdd}</span>
	                    </div>
	                    </c:if>
	                    <div class="am-u-sm-12 am-padding-top-sm am-padding-bottom-sm order-detail-mid">
	                    </div>
					 <c:if test="${order.dateAdd!=null}">
                    <div class="am-u-sm-2 "><span class="order-detail-left-3"></span></div>
                    <div class="am-u-sm-10 order-detail-right">
                        <span class="am-margin-left-xs">等待咨询</span>
                        <c:if test="${order.orderStatus==6}">
                         <span class="am-text-sm am-margin-left-sm am-fr ">${order.dateChange}</span>
                        </c:if>
                        <c:if test="${order.orderStatus!=6}">
                         <span class="am-text-sm am-margin-left-sm am-fr ">${order.payTime}</span>
                        </c:if>
                    </div>
                     </c:if>
                    <div class="am-u-sm-12 am-padding-top-sm am-padding-bottom-sm order-detail-mid">

                    </div>
                    <c:if test="${order.dateChange!=null}">
                    <c:if test="${order.orderStatus!=6}">
                    <div class="am-u-sm-2 "><span class="order-detail-left-4"></span></div>
                    <div class="am-u-sm-10 order-detail-right">
                        <span class="am-margin-left-xs">咨询完成</span> <span class="am-text-sm am-margin-left-sm am-fr ">${order.dateChange}</span>
                    </div>
                    </c:if>
                    </c:if>
                    <div class="am-u-sm-12 am-padding-top-sm am-padding-bottom-sm order-detail-mid">
                    </div>
                    <c:if test="${order.pingjiaTime!=null}">
                    <div class="am-u-sm-2 "><span class="order-detail-left-5"></span></div>
                    <div class="am-u-sm-10 order-detail-right">
                        <span class="am-margin-left-xs">用户已评价</span> <span class="am-text-sm am-margin-left-sm am-fr ">${order.pingjiaTime}</span>
                    </div>
                    </c:if>
                </div>
            </div>

        </div>
    </div>
    <!--隐藏音频-->
    <div class="am-hide">
        <audio src=""  id="audio">亲 您的浏览器不支持html5的audio标签</audio>
    </div>

</section>
<footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bg-white"
        id="">
    <c:if test="${order.orderStatus==6 || order.orderStatus==0 || order.orderStatus==1}">
    <div class="  ">
        <div class="am-g am-text-center font-color-16  am-padding-bottom-xs ">
            <div class="am-u-sm-4 border-right jujue" data-id="${order.id}"><span class="prelative padding-left-15"><i class="icon_026_1"></i>拒绝接单</span></div>
            <div class="am-u-sm-4 border-right"><span class="prelative padding-left-15"><i class="icon_027_1"></i><a href="tel:${user.telephone}" style="color:#9A9AAB">电联</a></span></div>
            <div class="am-u-sm-4 jiesuan" data-id="${order.id}"><span class="prelative padding-left-15"><i class="icon_028_2"></i>结算</span></div>
        </div>
    </div>
	</c:if>
</footer>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">理由</div>
        <div class="am-modal-bd">
            <textarea rows="3" class="mark_content am-modal-prompt-input" id="jueContent" placeholder="请填写拒绝原因，拒绝后将自动退款"></textarea>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确认</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-jiesuan">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">结算</div>
        <div class="am-modal-bd">
            <textarea rows="3" class="mark_content am-modal-prompt-input"  id="jiesuanContent" placeholder="填写咨询回复情况"></textarea>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确认</span>
        </div>
    </div>
</div>


<script src="${ctx}/assets/js/jquery.min.js"></script>
<script src="${ctx}/assets/js/amazeui.min.js"></script>
<script>
$("#btntext").on("click",function(){

        var $voices=$("#btnvoice").find(".icon_46");
        $("#font_voice").text("语言");
        $voices.removeClass("cur");

        $("#txt_question_content").removeClass("am-hide").focus();

    });

    $(".voice").on("click",function(){
          var audio = document.getElementById("audio");
          audio.src=$(this).find("input").val(); 
          var $voices= $(this).find(".icon_711");
            $(".report_item .voice").find(".icon_711").remove("cur");
            if($voices.hasClass("cur")){
                $voices.removeClass("cur");
                audio.pause();
            }else{
                $voices.addClass("cur");
                audio.play();
            }
        });
    $(function() {
        $('.jujue').on('click', function() {

            $('#my-prompt').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    var $link = $(this.relatedTarget);
                    var orderId=$link.data('id');
                     var mark=$("#jueContent").val();
					var orderStr=$.ajax({url:"${ctx}/updatePeixunOrder?mark="+mark+"&openType=0&orderId="+orderId,async:false});
		       	    var orderJson=JSON.parse(orderStr.responseText);
		       	    if(orderJson.resultCode=="0"){
		       	    	location.reload(true);   
		       	    }else{
		       	    	alert(orderJson.resultDesc);
		       	    }
                },
                onCancel: function() {

                }
            });
        });

        $('.jiesuan').on('click', function() {

            $('#my-jiesuan').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    var $link = $(this.relatedTarget);
                    var orderId=$link.data('id');
                    var mark=$("#jiesuanContent").val();
					var orderStr=$.ajax({url:"${ctx}/updatePeixunOrder?mark="+mark+"&openType=1&orderId="+orderId,async:false});
		       	    var orderJson=JSON.parse(orderStr.responseText);
		       	    if(orderJson.resultCode=="0"){
		       	    	location.reload(true);   
		       	    }else{
		       	    	alert(orderJson.resultDesc);
		       	    }
                },
                onCancel: function() {

                }
            });
        });
    });
</script>
</body>
</html>